<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Simple Color Picker</title>
<style>
/*input{text-align:center;border:none;padding:0;height:36px;width:136px;background-color:#f00;background-image:url(slek.png);background-repeat:no-repeat;}
input:focus{text-align:center;height:36px;width:136px;background-color:#f00;background-image:url(slek.png);background-repeat:no-repeat;}
*/
input{border:none;height:30px;background:#aaa;text-align:center;font-size:18px;border:1px solid #555;}
div.demo{width:90%;margin:20px auto;padding:20px;border:2px solid #333;}
p{font-weight:bold;font-size:22px;
</style>
</head>
<body>
<!--
https://gr-blogtools.googlecode.com/svn/colorPicker/v02/modif/scpV02A.obus.js
-->

<script type="text/javascript" src="scpboks.obus.js"></script>


<div class="demo">
<h1>Demo 1</h1>
<p> Redirect value: <input class="color {valueElement:'myValue'}"> <input id="myValue">
<p> Redirect style: <input class="color {styleElement:'myStyle'}"> <input id="myStyle">
<p> Redirect both:  <input  class="he color {valueElement:'myBoth',styleElement:'myBoth'}"><input id="myBoth">
</div>

<div class="demo">
<h1>Demo 2</h1>
<p> Stronger borders: 
<input style="background:url(slek.png);" class="color {hash:true,jspBoks:15,jspBorCol:'#444444 #888888 #444444 #888888',jspBor:5,
jspBoksCol:'#aaaaaa'}" value="#f00f00">
<p> Stronger face:    <input class="color {jspBoks:40}">
<p> This field can be left empty: <input class="color {required:false,jspBorCol:'#444444',jspBor:1}">
<p> This field accepts any value: <input class="color {adjust:false}">
<p> Hash symbol:                  <input class="color {hash:true}">
<p> Hash symbol, lowercase:       <input class="color {hash:true,caps:false}">
</div>

<div class="demo">
<h1>Demo 3</h1>
<p style="margin-left:610px">Left:  <input class="color {jspPosition:'left'}">
<p style="margin-left:310px"> Right: <input class="color {jspPosition:'right'}">
<p style="margin-top:65px">  Top:   <input class="color {jspPosition:'top'}">

<div class="demo">
<h1>Demo 4</h1>
<p> Change Text Color<span style="width:75px;display:inline-block;"></span>: 
<input value="#FCFC9F" class="color {jspPosition:'top'}"
	onchange="document.getElementsByName('miun')[0].style.color = '#'+this.color">
<p> Change background Color: 
<input value="#15199E" class="color {jspPosition:'top'}"
	onchange="document.getElementsByName('miun')[0].style.backgroundColor = '#'+this.color">
<div id="miun" name="miun" class="miun" style="color:#FCFC9F;background:#15199E;line-height:80px;display:block;width:600px;height:100px;margin:20px auto;border:2px solid #444;font-weight:bold;font-size:60px;text-align:center;">Contoh warna teks</div>
</div>
<!--[if lt IE 9]> <script src="https://gr-blogtools.googlecode.com/svn/js/ie/nggoie.obus.js">IE7_PNG_SUFFIX=".png"</script> <![endif]-->

</body>
</html>
